<template>
  <div>
    <!-- <el-alert
      type="success"
      :closable="false"
      style="margin-bottom:12px;"
    >该页面尚未完工，暂以<b>原始数据</b>内容代替。</el-alert> -->
    <el-tabs
      v-model="activeName"
      tab-position="left"
      style="height:60vh;margin-bottom:12px;"
    >
      <el-tab-pane
        v-for="(record,index) in detail"
        :key="'tab_'+index"
        :label="record.title"
        :name="'tab_'+index"
      >
        <!-- <div class="json_wrapper">
          <pre>{{record}}</pre>
        </div> -->
        <div class="wrapper">
          <el-descriptions
            :column="3"
            size="small"
            :border="true"
          >
            <el-descriptions-item
              label="练习"
              :span="3"
            >
              <span>{{record.title}}</span>
              <el-tag
                size="mini"
                type="info"
                style="margin:3px;"
              >{{record.office}}</el-tag>
              <el-tag
                size="mini"
                type="info"
                style="margin:3px;"
              >{{record.year}}年度</el-tag>
              <el-tag
                size="mini"
                type="info"
                style="margin:3px;"
              >第{{record.cycle}}期</el-tag>
            </el-descriptions-item>
            <el-descriptions-item
              label="学员"
              :span="1"
            >
              <span>{{record.traineeName}}</span>
              <el-tag
                size="mini"
                type="info"
                style="margin:3px;"
              >{{record.traineeNumber}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item
              label="教员"
              :span="1"
            >
              <span>{{record.coachName}}</span>
              <el-tag
                size="mini"
                type="info"
                style="margin:3px;"
              >{{record.coachNumber}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item
              label="得分"
              :span="1"
            >
              <i
                v-if="record.evaluationScore>=90"
                class="el-icon-sunny"
              ></i>
              <i
                v-else-if="record.evaluationScore>=85"
                class="el-icon-cloudy"
              ></i>
              <i
                v-else
                class="el-icon-lightning"
              ></i>
              <span>&nbsp;{{record.evaluationScore}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="包含科目"
              :span="3"
            >
              <el-tag
                v-for="item in record.subjects"
                :key="item"
                size="mini"
                style="margin:3px;"
              >{{item}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item
              label="加练科目"
              :span="3"
            >
              <el-tag
                v-for="item in record.failedSubjects"
                :key="item"
                type="danger"
                size="mini"
                style="margin:3px;"
              >{{item}}</el-tag>
              <div v-if="record.failedSubjects.length==0">
                <i
                  class="el-icon-success"
                  style="color:#67C23A;margin-right:3px;"
                ></i>
                <span>无需加练</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              v-for="item in record.evaluations"
              :key="item.title"
              :label="item.title"
            >
              <el-rate
                :value="item.value"
                disabled
                show-score
                text-color="#ff9900"
              ></el-rate>
            </el-descriptions-item>
            <el-descriptions-item
              v-for="item in record.subjectsComments"
              :key="item.subject"
              :label="item.subject"
              :span="3"
            >
              <i
                v-if="item.pass=='是'"
                class="el-icon-success"
                style="color:#67C23A;margin-right:3px;"
              ></i>
              <i
                v-else
                class="el-icon-error"
                style="color:#F56C6C;margin-right:3px;"
              ></i>
              <span>{{item.comments.join(", ")}}</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="教员评价"
              :span="3"
            >
              <span v-if="record.coachComments.length>0">
                {{record.coachComments}}
              </span>
              <span v-else>无</span>
            </el-descriptions-item>
            <el-descriptions-item
              label="学员自评"
              :span="3"
            >
              <span v-if="record.traineeComments.length>0">
                {{record.traineeComments}}
              </span>
              <span v-else>
                <i
                  class="el-icon-warning"
                  style="color:#E6A23C;margin-right:3px;"
                ></i>
                <span style="color:#E6A23C;font-weight:bold">
                  学员未填写自评！
                </span>
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "traineeDetail",
    props: {
      detail: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        activeName: "tab_0"
      }
    },
    methods: {},
    mounted() {},
  }
</script>

<style scoped>
  .json_wrapper {
    width: 100%;
    /* height: calc(50vh - 30px); */
    height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    color: #aaa;
    font-size: 10px;
  }

  .wrapper {
    width: 100%;
    height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>